<template>
  <h1 class="centered-heading">
    <div v-if="!isEdit">
      {{ resumeData.info.name }}
    </div>
    <input v-else type="text" v-model="resumeData.info.name">
  </h1>
  <p class="contact-info">
    <div v-if="!isEdit">
      {{ showcontact }}
    </div>
    <input v-else type="text" v-model="resumeData.info">
  </p>
  <h2>
    教育经历<button class="button" v-show="!isEdit" @click="toggleEducation">
      {{ resumeData.educationVisible ? "-" : "+" }}
    </button>
  </h2>
  <hr v-if="resumeData.educationVisible" />
  <div class="container" v-if="resumeData.educationVisible">
    <div class="content-wrapper">
      <div v-if="!isEdit">
      <p style="font-weight: bold">{{ resumeData.education.university }}</p>
      <p>{{ resumeData.education.major }}</p>
      <p>{{ resumeData.education.courses.join(",") }}</p>
    </div>
    <div v-else>
      <input type="text" v-model="resumeData.education.university">
      <input type="text" v-model="resumeData.education.major">
      <input type="text" v-model="resumeData.education.courses">
    </div>
    <div class="photo">
      <!-- <img class="photo-img" :src="photoPath" /> -->
      <input v-if="isEdit" type="file" @change="handleImgFileChange" accept="image/*" />
      <img v-if="imageSrc" class="photo-img" :src="imageSrc" alt="Selected Image" />
    </div>
  </div>
    </div>
  <h2>
    技能<button class="button" v-show="!isEdit" @click="toggleSkills">
      {{ resumeData.skillsVisible ? "-" : "+" }}
    </button>
  </h2>
  <hr v-if="resumeData.skillsVisible" />
  <div class="container" v-show="resumeData.skillsVisible">
    <div v-for="(v, index) in resumeData.skills" :key="index">
      <div v-if="!isEdit">
        <p>
          {{ v }}
        </p>
      </div>
      <div v-else>
        <input type="text" v-model="resumeData.skills[index]" />
      </div>
    </div>
  </div>
  <h2>
    获奖<button class="button" v-show="!isEdit" @click="toggleAwards">
      {{ resumeData.awardsVisible ? "-" : "+" }}
    </button>
  </h2>
  <hr v-if="resumeData.awardsVisible" />
  <div>
    <div class="container" v-show="resumeData.awardsVisible">
        <div v-for="(_blank,index) in resumeData.awards" :key="index">
          <div v-if="!isEdit">{{ resumeData.awards[index] }}</div>
          <input v-else type="text" v-model="resumeData.awards[index]">
      </div>
    </div>
  </div>
  <h2>
    项目经历<button class="button" v-show="!isEdit" @click="toggleProjects">
      {{ resumeData.projectsVisible ? "-" : "+" }}
    </button>
  </h2>
  <hr v-if="resumeData.projectsVisible" />
  <div>
    <div class="container" v-show="resumeData.projectsVisible">
      <div v-for="(project, index) in resumeData.projects" :key="index">
        <div v-if="!isEdit">
          <p>{{ project.name }}</p>
          <p>{{ project.summary }}</p>
          <p>{{ project.description }}</p>
          <p v-if="project.link" :href="project.link" target="_blank">查看项目</p> 
        </div>
        <div v-else>
          <input type="text" v-model="project.name">
          <input type="text" v-model="project.summary">
          <input type="text" v-model="project.description">
          <input v-if="project.link" type="text" v-model="project.link">
        </div>
      </div>
    </div>
  </div>
  <div class="button-container">
    <button class="button-default" @click="toggleEdit">编辑</button>
    <button class="button-default" @click="">生成PDF</button>
    <input type="file" ref="fileInput" @change="handleJsonFileChange" accept=".json" style="display: none;"/>
    <button class="button-default" @click="importJson">导入 JSON</button>
  </div>
</template>

<script setup lang="ts">
import "./style.css";
import { computed, reactive,ref } from "vue";

interface Info {
  name: string;
  email: string;
  phone: string;
  gitee?: string;
  github?: string;
}
interface Education {
  photo: string;
  university: string;
  major: string;
  courses: string[];
}

interface Project {
  name: string;
  summary: string;
  description?: string;
  link?: string;
}

interface ResumeData {
  info: Info;
  education: Education;
  skills: string[];
  awards: string[];
  projects: Project[];
  educationVisible?: boolean;
  skillsVisible?: boolean;
  awardsVisible?: boolean;
  projectsVisible?: boolean;
}
const resumeData: ResumeData = reactive({
  info: {
    name: "方瑞嘉",
    email: "2648242688@qq.com",
    phone: "19056474646",
    gitee: "https://gitee.com/rjfang",
  },
  education: {
    photo: "./frj.jpg",
    university: "安徽工业大学",
    major: "软件工程",
    courses: ["数据结构", "计算机系统基础", "C#", "C++", "Java", "Linux 编程"],
  },
  skills: [
    "熟练使用Go, 熟悉C++,Python,Java 语言, 具有良好的编程以及文档编写习惯:",
    "熟练使用Gin,Gorm,Scarpy,Go-zero 等开源框架:",
    "熟练使用Docker,Docker compose, 熟悉Kubernetes 等容器编排和集群部署",
    "掌握Git 等版本控制和最基本的GDB,pprof,valgrind 等调试调优工具:",
    "掌握Rabbitmq,Mysql,Redis, Kafka⋯等组件的部署使用:",
    "熟练使用Goland,VScode 等开发工具",
    "熟悉Linux 环境下开发, 掌握Linux 常见命令",
  ],
  awards: [
    "第四届全国大学生算法设计与编程挑战赛（秋季赛）铜奖",
    "第五届全国高校计算机能力挑战赛C++ 赛项全国决赛三等奖",
    "团体程序设计天梯赛团队省一等奖",
    "第十四届蓝桥杯省赛二等奖",
  ],
  projects: [
    {
      name: "AHUTOJ",
      summary: "维护和后续开发",
      description:
        "后端项目仓库：ahutoj-devops : 对学校oj 项目使用devops 模式的尝试- Gitee.com",
    },
    {
      name: "Tiktok",
      summary: "字节青训营后端项目",
      description:
        "https://gitee.com/rjfang/ahutoj-devops/tree/f599810d44ed1115dfb228d239fd19e1a1ccbdda",
    },
    {
      name: "Json解析器",
      summary: "基于C++17 的Json 解析器",
      description: "后端代码仓库：json_parser: 基于C++17 的json 解析器",
    },
  ],
  educationVisible: true,
  skillsVisible: true,
  awardsVisible: true,
  projectsVisible: true,
});
const isEdit = ref(false);
const imageSrc = ref('/src/assets/frj.jpg');
const fileInput = ref<HTMLInputElement | null>(null);
console.log(JSON.stringify(resumeData))
// methods适合处理逻辑场景，触发事件，computed处理跟踪，有缓存{{}}是引用属性
const showcontact = computed(() => {
  let res = "";
  for (const [k, v] of Object.entries(resumeData.info)) {
    if (k === "name") continue;
    res += `${k}: ${v} | `;
  }
  return res.trimEnd().slice(0, -1); //这里function+v-html是一样的
});

const handleImgFileChange = (event: Event) => {
  const file = (event.target as HTMLInputElement).files?.[0];
  if (file) {
    const reader = new FileReader();
    reader.onload = (e: ProgressEvent<FileReader>) => {
      if (e.target?.result) {
        imageSrc.value = e.target.result as string;
      }
    };
    reader.readAsDataURL(file);
  }
}
const handleJsonFileChange = (event: Event) => {
      const target = event.target as HTMLInputElement;
      if (target.files && target.files.length > 0) {
        const file = target.files[0];
        const reader = new FileReader();
        reader.onload = (e: ProgressEvent<FileReader>) => {
          if (e.target && e.target.result) {
            try {
              const jsonData = JSON.parse(e.target.result as string);
              Object.assign(resumeData, jsonData);
            } catch (error) {
              console.error("解析 JSON 文件失败", error);
            }
          }
        };
        reader.readAsText(file);
      }
    };

    const importJson = () => {
      fileInput.value!.click()
    };

function toggleEducation() {
  resumeData.educationVisible = !resumeData.educationVisible;
}
function toggleSkills() {
  resumeData.skillsVisible = !resumeData.skillsVisible;
}
function toggleAwards() {
  resumeData.awardsVisible = !resumeData.awardsVisible;
}
function toggleProjects() {
  resumeData.projectsVisible = !resumeData.projectsVisible;
}
function toggleEdit(){
  isEdit.value=!isEdit.value;
  resumeData.awardsVisible=true;
  resumeData.skillsVisible=true;
  resumeData.projectsVisible=true;
  resumeData.educationVisible=true;
}

</script>

<style>
.centered-heading {
  text-align: center;
}
.contact-info {
  text-align: center;
  font-size: 14px;
  color: #666;
  width: 500px; /* 设置一个固定的宽度 */
  white-space: pre-wrap; /* 允许文本换行 */
  margin: 0 auto; /* 使容器居中 */
}
.container {
  width: 100%;
  background-color: #fff;
  padding: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.content-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.photo {
  width: 150px;
  /* display: inline-block; */
  /* text-align: right; */
  margin-right: 3%;
}

.photo-img {
  margin-right: auto;
  display: block;
  max-width: 80%;
  max-height: 80%;
  object-fit: cover;
}

.project-name {
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

.project-summary {
  font-size: 16px;
  color: #666;
  margin-top: 10px;
}

.project-description {
  font-size: 14px;
  color: #888;
  margin-top: 10px;
  line-height: 1.5;
}

.button {
  background-color: #d0d0d0; /* 浅灰色 */
  border: none;
  color: black;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 18px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 8px;
  transition: background-color 0.3s ease, transform 0.3s ease; /* 添加过渡效果 */
}

.button:hover {
  background-color: #ebe6e6; /* 鼠标悬停时的背景颜色 */
  transform: scale(1.05); /* 鼠标悬停时的缩放效果 */
}


.button-container {
  text-align: center; /* 添加这一行 */
}
.button-default {
  border-radius: 10px;
  border: 1px solid transparent;
  padding: 0.6em 1.2em;
  font-size: 2em;
  font-weight: 500;
  font-family: inherit;
  background-color: #eeebeb;
  cursor: pointer;
  transition: border-color 0.25s;
  padding: 0 auto;
  width: 40%;
  display: inline-block; /* 添加这一行 */
  margin-top: 20px;
  margin-right: 15px; /* 添加右边距，使按钮之间有空隙 */
}
.button-default:hover {
  border-color: #c5c6dd;
}

.card {
  padding: 2em;
}

input{
  outline-style: none ;
  border: 1px solid #ccc; 
  border-radius: 3px;
  padding: 13px 14px;
  max-width: 999000px;
  width: fit-content;
  font-size: 16px;
  font-weight: 700;
  font-family: "仿宋", FangSong, serif;
}

input:focus{
  border-color: #66afe9;
  outline: 0;
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)
}

body {
  font-family: "仿宋", FangSong, serif;
}
</style>
